<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page language="java" import="cn.itcast.commons.CommonUtils" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
	<title>江西农业大学2018年525心理健康活动月之——“书写心声”书法、摄影作品评比</title>

	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="<c:url value='/css/index.css'/>" />
	<link href="<c:url value='/toastr/toastr.min.css'/>" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="<c:url value='/js/md5.js'/>"></script>     
    <script src="<c:url value='/toastr/toastr.min.js'/>"></script>
   	<script type="text/javascript" src="<c:url value='/js/index.js"'/>"></script>
   
</head>
<body>
	<% 
		String token = CommonUtils.uuid();
		session.setAttribute("token", token);
	%>
	<input type="hidden" id="token" value="<%=token %>"/>
	<%
		String error1 =(String)request.getAttribute("error1");
		String error2 =(String)request.getAttribute("error2");
		String error3 =(String)request.getAttribute("error3");
		if(error1 != null){
			out.print("<script type='text/javascript'>alert('warning:您已经选过了！');</script>");
		}
		if(error2 != null){
			out.print("<script type='text/javascript'>alert('error:请正规操作！');</script>");
		}
		if(error3 != null){
			out.print("<script type='text/javascript'>alert('请先登录');</script>");
		}
	 %>
	 
	 
	<div id="main">
		<!-- 投票主题，图片 -->
		<div class="bg-header">
			<h3>江西农业大学书法、摄影作品评比</h3>
		</div>
		<div class="container" style="max-width: 540px;">
			<!-- 投票说明，规则 -->
			<div class="decription">
				<p>
					<span>投票说明</span>江西农业大学2018年525心理健康活动月之——“书写心声”书法、摄影作品评比
				</p>
				<p>
					<span>投票规则</span>毛笔、硬笔、摄影作品，每一类投2票，一共投6票
				</p>
			</div>
			<!-- 作品展示，书法，摄影 -->
			<div class="displayArea"> 
					<!-- 毛笔区 -->
					<h4>毛笔作品</h4>
					<div class="art">
						
						<ul>
						<c:forEach items="${voteinfoList1 }" var="voteinfo1">
								<li>
								<span>序号：${voteinfo1.worksid }</span>
								<span>作品名：${voteinfo1.works }</span>
								<img src="<c:url value='/${voteinfo1.imageurl }'/>"/>
							</li>
						</c:forEach>						
						</ul>
					</div>
					<!-- 硬笔区 -->
					<h4>硬笔作品</h4>
					<div class="art">
						<ul>
						<c:forEach items="${voteinfoList2 }" var="voteinfo2">
								<li>
								<span>序号：${voteinfo2.worksid }</span>
								<span>作品名：${voteinfo2.works }</span>
								<img src="<c:url value='/${voteinfo2.imageurl }'/>"/>
							</li>
						</c:forEach>	
						</ul>
					</div>
					<!-- 摄影区 -->
					<h4>摄影作品</h4>
					<div class="art">
						<ul>
						<c:forEach items="${voteinfoList3 }" var="voteinfo3">
								<li>
								<span>序号：${voteinfo3.worksid }</span>
								<span>作品名：${voteinfo3.works }</span>
								<img src="<c:url value='/${voteinfo3.imageurl }'/>"/>
							</li>
						</c:forEach>	
						</ul>
					</div>
			 </div>
			 
			    <c:if test="${empty sessionVoter }">
						<!-- 投票区 -->
				<div class="voteArea">
				<h4>投票</h4>
				<form action="<c:url value='/VoteinfoServlet'/>" method="post" id="form1">
				<input type="hidden" name="method" value="voteResult" >
					<div class="voteDisplay">
						<h5>毛笔作品</h5>
						<div class="vote">
							 <ul>
							 <c:forEach items="${voteinfoList1 }" var="voteinfo1">
							 	<li>
							 		<input type="checkbox" name="group1" value="${voteinfo1.worksid }" id="${voteinfo1.worksid }"/>
							 		<label for="${voteinfo1.worksid }">${voteinfo1.worksid } ${voteinfo1.works }</label>
							 	</li>
							 </c:forEach> 	
							 </ul>
						</div>

						<h5>硬笔作品</h5>
						<div class="vote">
							 <ul>
							 	<c:forEach items="${voteinfoList2 }" var="voteinfo2">
							 	<li>
							 		<input type="checkbox" name="group2" value="${voteinfo2.worksid }" id="${voteinfo2.worksid }"/>
							 		<label for="${voteinfo2.worksid }">${voteinfo2.worksid } ${voteinfo2.works }</label>
							 	</li>
							   </c:forEach> 	
							 </ul>
						</div>

						<h5>摄影作品</h5>
						<div class="vote">
							 <ul>
							 	<c:forEach items="${voteinfoList3 }" var="voteinfo3">
							 	<li>
							 		<input type="checkbox" name="group3" value="${voteinfo3.worksid }" id="${voteinfo3.worksid }"/>
							 		<label for="${voteinfo3.worksid }">${voteinfo3.worksid } ${voteinfo3.works }</label>
							 	</li>
							   </c:forEach>
							 </ul>
						</div>
					</div>
					
				</form>
				
				
				<c:choose>
					<c:when test="${ not empty sessionUser }">
					<button class="btn-block btn btn-primary btn-lg sub " type="buttton" onclick="document.getElementById('form1').submit();" >提交</button>
					</c:when>
					<c:otherwise>
					<button class="btn-block btn btn-primary btn-lg sub" data-toggle="modal" data-target="#myModal">提交</button>
					</c:otherwise>
				</c:choose>
				
			</div>
			 	
		
				</c:if>

			 	<c:if test="${ not empty sessionVoter }">
			 	
				<div class="vote-result">
				<h4>投票结果</h4>
				<div class="vote-result-area">
					<h5>毛笔作品</h5>
						<div>
						<c:forEach items="${oneList }" var="one" >
						<div class="progress">
						  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: ${one.percent}%">
						  	<span>${one.works }</span>
						  </div>
						  <span>${one.poll } 票</span>
						</div>
						</c:forEach>
						
					</div>
				</div>
				<div class="vote-result-area">
					<h5>硬笔作品</h5>
						<div>
						<c:forEach items="${twoList }" var="two">
						<div class="progress">
						  <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: ${two.percent}%">
						  	<span>${two.works }</span>
						  </div>
						  <span>${two.poll } 票</span>
						</div>						
						</c:forEach>	
					
					</div>
				</div>
				<div class="vote-result-area">
					<h5>摄影作品</h5>
						<div>
						
						<c:forEach items="${threeList }" var="three" >
						<div class="progress">
						  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: ${three.percent}%">
						  	<span>${three.works}</span>
						  </div>
						  <span>${three.poll } 票</span>
						</div>
						</c:forEach>
					</div>
				</div>	
			
				</div>
	
			 	</c:if>
				
	
		</div>
		<!-- 登录 -->
		<div class="vote-login">
			<!-- 模态框（Modal） -->
			 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">教务系统授权登录</h4>
                        </div>
                        <div class="form-horizontal">
                     		<form action="<c:url value='/VoteinfoServlet'/>" enctype="multipart/form-data">
                            <div class="modal-body">
                                <div class="form-group has-feedback">
                                    <div class="col-sm-12">
                                        <div class="input-group">
                                            <span class="input-group-addon glyphicon glyphicon-search" aria-hidden="true"></span>
                                            <input type="text" class="form-control input-lg" id="username" name="username" aria-describedby="inputGroupSuccess2Status" placeholder="学号">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group has-feedback">
                                    <div class="col-sm-12">
                                        <div class="input-group">
                                            <span class="input-group-addon glyphicon glyphicon-lock" aria-hidden="true"></span>
                                            <input type="password" class="form-control input-lg" id="passwrod" name="passwrod" aria-describedby="inputGroupSuccess2Status" placeholder="密码">
                                        </div>
                                    </div>
                                </div>
                            </div>
          
                            	
                            	<div class="modal-footer">
                               		  <button id="btn_submit" type="button" class="btn btn-primary">
                                   		 登录
                              		  </button>
                            	</div>
                         
                            </form>                     
                        </div>
                        
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
             </div>
		</div>
		<!-- 页脚 -->
		<div class="footer">
			版权所有 <a href="https://baike.baidu.com/item/%E6%B1%9F%E8%A5%BF%E5%86%9C%E4%B8%9A%E5%A4%A7%E5%AD%A6%E8%BD%AF%E4%BB%B6%E5%AD%A6%E9%99%A2%E9%9D%92%E8%97%A4%E5%B7%A5%E4%BD%9C%E5%AE%A4" target="blank" style="color:#ccc">江西农业大学软件学院青藤工作室</a> ©青藤设计
		</div>
	</div>
	<script type="text/javascript">
	function EnEight(str){
	    var monyer = new Array();
	    var i,s;
	    for(i=0;i<str.length;i++)
	        monyer.push(str.charCodeAt(i).toString(8)); 
	    return monyer.join('-');
	}
	window.onload = function(){
		toastr.options = { positionClass: "toast-top-center", showDuration: "150", hideDuration: "2000", showMethod: "fadeIn" };
		$("#btn_submit").click(function() {
			
			var token = $.trim($("#token").val());
			var username = $.trim($("#username").val());		
			var password = $.trim($("#passwrod").val());
			var timeStamp = new Date().getTime();
			if(username==""){
				toastr.error("用户名能为空");
				return;
			}
			if(password==""){
				toastr.error("密码不能为空");
				return;
			}
			var epwd = EnEight(password);
			var salt = $.md5(username+password+timeStamp+token);
			var formData = {
				method:"login",
				username: username,
				password: epwd,
				timeStamp: timeStamp,
				salt: salt
			};
			$.ajax({
				url:"/vote/VoteinfoServlet",	
				type:"POST",
				data:formData,//给服务器的参数
				success:function(result){
				
					if (result.code === 0) {
	                    toastr.success(result.message);
	                    
	                    window.location = result.appendData;
	                }
	                else {
	                    toastr.error(result.message);
	                }
				},
				error:function(){
	                toastr.error("网络错误！请检查网络");
	            }
			});
		});	
	}
	</script>
</body>
</html>